<template>
  <div class="aggregate-function-config">
    <div class="groupby-box">
      <p class="text">Group by:</p>
      <a-select
        v-model="groupbyCol"
        mode="multiple"
        :max-tag-text-length="70"
        :allow-clear="true"
        style="width: 95%;"
        @change="emitFilterParams"
      >
        <a-select-option
          v-for="(item, index) in columnsList"
          :key="index"
          :value="item"
          :disabled="determineDisabled(item)"
          >{{ item }}</a-select-option
        >
      </a-select>
    </div>
    <div class="func-box">
      <p class="text">Values:</p>
      <a-select
        v-model="funcType"
        style="width: 95%;"
        @change="emitFilterParams"
      >
        <!-- for number type-->
        <a-select-option
          v-if="['decimal', 'int'].includes(column.desc)"
          value="sum"
          >SUM({{ column.name }})</a-select-option
        >
        <a-select-option
          v-if="['decimal', 'int'].includes(column.desc)"
          value="avg"
          >AVG({{ column.name }})</a-select-option
        >
        <a-select-option
          v-if="['decimal', 'int'].includes(column.desc)"
          value="min"
          >MIN({{ column.name }})</a-select-option
        >
        <a-select-option
          v-if="['decimal', 'int'].includes(column.desc)"
          value="max"
          >MAX({{ column.name }})</a-select-option
        >
        <!-- for number and string type-->
        <a-select-option value="count"
          >COUNT({{ column.name }})</a-select-option
        >
      </a-select>
    </div>
    <div class="type-box">
      <p class="text">Type:</p>
      <a-select
        v-model="generateType"
        style="width: 95%;"
        @change="emitFilterParams"
      >
        <a-select-option value="1">生成一个新的字段</a-select-option>
        <a-select-option value="2">生成一张新的表</a-select-option>
      </a-select>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import DataStore, { IColumn } from '@/store/modules/dataview'
import { StatisticsAction } from '@/util/data-selection-actions'

@Component
export default class AggregateFunction extends Vue {
  @Prop() aggreType: any //  聚合函数类型
  @Prop() editData!: any //  edit history 参数
  @Prop({ default: false }) isEdit!: boolean //  是否为编辑状态
  @Prop() column!: IColumn

  //  optional
  public groupbyCol: Array<string> = []
  public funcType: string = ''
  //  generate 1 - column; 2 - table
  public generateType: string = '1'
  //  其他列名
  public columnsList: Array<string> = []

  public get tableColumns() {
    return DataStore.tableColumns
  }

  //  监听prop aggreType, 设置funcType
  @Watch('aggreType', { immediate: true })
  public onAggreTypeChange(value: string) {
    this.funcType = value
  }
  //  监听编辑模式下，传入的数据
  @Watch('editData', { immediate: true, deep: true })
  private onCurrentHistory(newValue: any) {
    if (!newValue || !this.isEdit) {
      return
    }

    const history = newValue.data
    if (
      history.actionType === StatisticsAction.aggreFunc &&
      history.col === this.column.name
    ) {
      this.groupbyCol = history.groupByCol
      this.generateType = history.resultType
      this.funcType = history.aggrfun
    }
  }
  //  决定是否禁用option，当用户选择3个options后，其余的options无法被选择
  private determineDisabled(item: any) {
    if (this.groupbyCol.length === 3) {
      if (this.groupbyCol.includes(item)) {
        return false
      }
      return true
    }
    return false
  }

  public mounted() {
    this.generateColList()
    //  当用户没有进行任何操作，使用默认的值
    this.emitFilterParams()
  }

  //  生成其他列名 - 数组
  public generateColList() {
    for (let i = 0, { length } = this.tableColumns; i < length; i += 1) {
      if (this.tableColumns[i].name !== this.column.name) {
        this.columnsList.push(this.tableColumns[i].name)
      }
    }
  }
  //  为api 准备data 参数
  public emitFilterParams() {
    this.$emit('on-filter-params-change', {
      data: {
        action: 'GROUP_BY',
        col: this.column.name,
        groupByCol: this.groupbyCol,
        aggrfun: this.funcType,
        resultType: this.generateType,
        description: this.funcType, //  聚合函数类型
        actionType: StatisticsAction.aggreFunc,
      },
    })
  }
}
</script>

<style lang="less" scoped>
.aggregate-function-config {
  height: 100%;
  overflow-y: scroll;
}

.groupby-box,
.func-box {
  margin-bottom: 10px;
}

.text {
  margin-bottom: 0;
}
</style>
